<!--入库   新增,修改-->
<template>
    <el-dialog :title="!dataForm.id?'新增':'编辑'" :visible.sync="dialogVisible">
        <el-form ref="dataForm" :model="dataForm" :rules="inventoryRules" label-width="110px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="入库日期:" prop="inDate">
                        <el-date-picker v-model="dataForm.inDate" type="date" placeholder="入库日期"
                                        value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions"
                                        style="width: 100%">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="类别:" prop="dictCategory">
                        <!--                        <CategoryCascader v-model="dataForm.dictCategory"></CategoryCascader>-->
                        <RenSelect dictType="goods_category" placeholder="类别" style="width: 100%"
                                   v-model="dataForm.dictCategory"></RenSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="存货编码:" prop="code">
                        <el-input v-model="dataForm.code" placeholder="存货编码" type="number"
                                  oninput="if(value.length>9)value=value.slice(0,9)"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="存货名称:" prop="name">
                        <el-input v-model="dataForm.name" placeholder="存货名称"/>
                        <!--                        <el-autocomplete-->
                        <!--                                v-model="dataForm.name"-->
                        <!--                                :fetch-suggestions="querySearchAsync"-->
                        <!--                                placeholder="存货名称"-->
                        <!--                                clearable-->
                        <!--                                style="width: 100%"-->
                        <!--                        ></el-autocomplete>-->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="规格型号:" prop="model">
                        <el-input v-model="dataForm.model" placeholder="规格型号"></el-input>
                        <!--                        <VagueInput v-model="dataForm.model"></VagueInput>-->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="计量单位:" prop="unit">
                        <UnitSelect v-model="dataForm.unit"></UnitSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数量:" prop="quantity">
                        <el-input v-model="dataForm.quantity" type="number" placeholder="数量"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="单价:" prop="unitFee">
                        <el-input v-model="dataForm.unitFee" type="number" placeholder="单价"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="金额:" prop="totalFee">
                        <!--                        <el-input v-model="dataForm.totalFee" type="number" placeholder="金额"/>-->
                        {{
                        dataForm.quantity && dataForm.unitFee ? dataForm.quantity * dataForm.unitFee : '无'
                        }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="生产厂家:" prop="factory">
                        <el-input v-model="dataForm.factory" placeholder="生产厂家"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注:" prop="remark">
                        <el-input type="textarea" :rows="2" v-model="dataForm.remark" placeholder="备注"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('dataForm')" :disabled="isSaving">保存</el-button>
            <p v-if="isSaving">正在保存...</p>
        </span>
    </el-dialog>
</template>

<script>
import CategoryCascader from './categoryCascader.vue'
import UnitSelect from './unitSelect.vue'
import VagueInput from './vagueInput.vue'

export default {
    components: {
        CategoryCascader,
        UnitSelect,
        VagueInput
    },
    data() {
        return {
            isSaving: false,
            dialogVisible: false,
            dataForm: {
                id: '',
                inDate: '',
                code: '',
                dictCategory: '',
                name: '',
                model: '',
                unit: '',
                quantity: '',
                unitFee: '',
                totalFee: '',
                factory: '',
                remark: '',
            },
            inventoryRules: {
                inDate: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                code: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                dictCategory: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                name: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                model: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                unit: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                quantity: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                unitFee: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                // totalFee: [
                //     {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                // ],
                factory: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ]
            },
            loadAll: [
                {"value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号"},
                {"value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号"},
                {"value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113"},
                {"value": "泷千家(天山西路店)", "address": "天山西路438号"},
                {"value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},
                {"value": "贡茶", "address": "上海市长宁区金钟路633号"},
                {"value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号"},
            ],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            }
        }
    },
    mounted() {
    },
    methods: {
        // querySearchAsync(queryString, cb) {
        //     var loadAll = this.loadAll;
        //     var results = queryString ? loadAll.filter(this.createStateFilter(queryString)) : loadAll;
        //     // 调用 callback 返回建议列表的数据
        //     cb(results)
        // },
        // 新增接口----------------
        submitForm(formName) {
            this.isSaving = true; // 显示加载状态
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dataForm.totalFee = this.dataForm.quantity * this.dataForm.unitFee
                    this.$http[!this.dataForm.id ? 'post' : 'put'](`/stock/stockin`, this.dataForm).then(({data: res}) => {
                        if (res.code !== 0) {
                            return this.$message.error(res.msg)
                        }
                        this.isSaving = false; // 隐藏加载状态
                        this.$message({
                            message: '恭喜你，保存成功',
                            type: 'success'
                        });
                        this.dialogVisible = false
                        this.dataForm = {}
                        this.$emit('updateViews');
                    })
                } else {
                    this.$message({
                        message: '必填项不能为空',
                        type: 'info'
                    });
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped>
.el-col {
    margin-bottom: 3px;
}
</style>